<template>
  <div class="questionsPreview">
    <el-dialog :visible="showPreview" title="题目预览" @close="closeDialog">
      <el-form :model="previewRowData" :inline="true">
        <el-form-item
          label="【题型】："
          label-width="70px"
          class="mgr"
          style="margin-right: 0; width: 25%"
        >
          <span>{{ $parent.turnChoose(previewRowData) }}题</span>
        </el-form-item>
        <el-form-item
          label="【编号】："
          label-width="70px"
          class="mgr"
          style="margin-right: 0; width: 25%"
        >
          <span>{{ previewRowData.id }}</span>
        </el-form-item>
        <el-form-item
          label="【难度】："
          label-width="70px"
          class="mgr"
          style="margin-right: 0; width: 25%"
        >
          <span>{{ $parent.difficultyFormatter(previewRowData) }}</span>
        </el-form-item>
        <el-form-item
          label="【标签】："
          label-width="70px"
          class="mgr"
          style="margin-right: 0; width: 25%"
        >
          <span>{{ previewRowData.tags }}</span>
        </el-form-item>
        <el-form-item
          label="【学科】："
          label-width="70px"
          class="mgr"
          style="margin-right: 0; width: 25%"
        >
          <span>{{ previewRowData.subjectName }}</span>
        </el-form-item>
        <el-form-item
          label="【目录】："
          label-width="70px"
          class="mgr"
          style="margin-right: 0; width: 25%"
        >
          <span>{{ previewRowData.directoryName }}</span>
        </el-form-item>
        <el-form-item
          label="【方向】："
          label-width="70px"
          class="mgr"
          style="margin-right: 0; width: 25%"
        >
          <span>{{ previewRowData.direction }}</span>
        </el-form-item>
        <hr />
        <el-form-item
          label="【题干】："
          label-width="70px"
          class="mgr"
          style="margin-right: 0; width: 25%"
        >
          <span class="questionRow">{{ reduceTagQuestion }}</span>
        </el-form-item>
      </el-form>
      <!-- 不同题型不同的解答 -->
      <el-form :model="previewRowData">
        <el-form-item v-if="previewRowData.questionType === '1'">
          <!-- <span>1111111111</span> -->
          <span>单选题 选项：（以下选中的选项为正确答案）</span>
          <el-radio-group :value="optionsAllChecked" class="elRadio">
            <el-radio
              :label="item.code"
              v-for="item in optionsAll"
              :key="item.id"
              class="elRadioItem"
              >{{ item.code }}{{ `、` }} {{ item.title }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item v-else-if="previewRowData.questionType === '2'">
          <el-checkbox-group :value="optionsAllMultipleChecked">
            <el-checkbox
              :label="item.code"
              v-for="item in optionsAll"
              :key="item.id"
              class="checkboxItem"
            >
              {{ item.code }}{{ `、` }} {{ item.title }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-else-if="previewRowData.questionType === '3'">

        </el-form-item>
      </el-form>
      <hr />
      <!-- 参考答案 答案解析 题目备注 -->
      <el-form>
        <el-form-item
          label="【参考答案】："
          label-width="100px"
          class="mgr"
          style="margin-right: 0; width: 25%"
        >
          <el-button type="danger" @click='videoShow = true' >视频答案预览</el-button>

        </el-form-item>
        <div class="video" v-if="videoShow" style="width:400px;height:300px">

          <video :src="previewRowData.videoURL" autoplay controls="controls" style="width:100%;height:100%"></video>
          </div>
      <hr>
      <el-form-item
          label="【答案解析】："
          label-width="100px"
          class="mgr"
          style="margin-right: 0"
        >
          <span>{{reduceTagAnswer}}</span>
        </el-form-item>
        <hr>
      <el-form-item
          label="【题目备注】："
          label-width="100px"
          class="mgr"
          style="margin-right: 0"
        >
        <span>{{previewRowData.remarks}}</span>

        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'questionsPreview',
  props: {
    // 是否展示数据
    showPreview: {
      type: Boolean,
      default: false
    },
    // 预览的回显数据
    previewRowData: {
      type: Object,
      required: true
    },
    // 题干
    reduceTagQuestion: {
      type: String,
      default: ''
    },
    // 解析
    reduceTagAnswer: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      videoShow: false // 视频的展示
      // code: ''
    }
  },
  // created () {
  //   this.getDirectoryList()
  // },
  computed: {
    // 单选框
    optionsAll () {
      return this.previewRowData.options
    },
    optionsAllChecked () {
      console.log(1)
      const code = this.optionsAll.find((item) => item.isRight === 1)
      console.log('code', code)
      return code.code
    },
    // 多选框选中
    optionsAllMultipleChecked () {
      const arr = []
      this.optionsAll
        .filter((item) => item.isRight === 1)
        .forEach((item) => arr.push(item.code))

      return arr
    }

  },
  methods: {
    closeDialog () {
      this.$emit('update:showPreview', false)
      this.$emit('update:previewRowData', {})
      this.videoShow = false
    },

    reduceTag (str) {
      return str.replace(/<[^>]+>/gi, '')
    }
  }
}
</script>

<style lang='scss' scoped>
// .paperview-input-text{
//  ::v-deep .el-input__inner {
//   -webkit-appearance: none;
//   background-color: #FFF;
//   background-image: none;
//   border-radius: 4px;
//   border: 0px;//改成0，边框就消失了！
//   width: 100%;
// }
// }
::v-deep {
  .el-form-item__label {
    padding-right: 0 !important;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .questionRow {
    color: blue;
  }
  .elRadio {
    display: block;
  }
  .elRadioItem,
  .checkboxItem {
    display: block;
    margin: 25px 0;
  }
}
</style>
